<script setup>
import {ref} from "vue";
import request5151 from "../../../utils/request5151.js";
import {ElMessage} from "element-plus";
// loading
const loading = ref(false)
// 搜索条件
const searchData = ref({
  registered: '',
  roomed: '',
  geted: '',
  payed: ''
})
// 学生进度数据
const studentProgressData = ref()
// 分页相关
let pageNum = 1
let pageSize = 9
const total = ref(0)
const handleSizeChange = (val) => {
  pageSize = val
  page()
}
const handleCurrentChange = (val) => {
  pageNum = val
  page()
}

//分页
function page() {
  loading.value = true
  request5151({
    url: '/welcomeProgress/getAllProgressOfPage',
    method: 'get',
    params: {
      pageNumber: pageNum,
      pageSize: pageSize,
      registered: searchData.value.registered ? searchData.value.registered : null,
      roomed: searchData.value.roomed ? searchData.value.roomed : null,
      geted: searchData.value.geted ? searchData.value.geted : null,
      payed: searchData.value.payed ? searchData.value.payed : null,
    }
  }).then((res) => {
    if (res.data.code === 200) {
      loading.value = false
      studentProgressData.value = res.data.data.records
      total.value = res.data.data.total
    }
  }).catch(() => {
    ElMessage.error('请求失败')
    loading.value = false
  })
}
page()
</script>

<template>
  <div class="studentProgressAll">
    <!--面包屑-->
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item><b>迎新信息管理</b></el-breadcrumb-item>
      <el-breadcrumb-item>学生进度</el-breadcrumb-item>
    </el-breadcrumb>
    <!--搜索条件-->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="是否注册" style="width: 200px;">
        <el-select
            v-model="searchData.registered"
            clearable
        >
          <el-option label="已注册" value="1"/>
          <el-option label="未注册" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否分配宿舍" style="width: 200px;">
        <el-select
            v-model="searchData.roomed"
            clearable
        >
          <el-option label="已分配" value="1"/>
          <el-option label="未分配" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否领取物品" style="width: 200px;">
        <el-select
            v-model="searchData.geted"
            clearable
        >
          <el-option label="已领取" value="1"/>
          <el-option label="未领取" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item label="是否支付费用" style="width: 200px;">
        <el-select
            v-model="searchData.admissionStatus"
            clearable
        >
          <el-option label="已支付" value="1"/>
          <el-option label="未支付" value="0"/>
        </el-select>
      </el-form-item>
      <el-button type="success" style="margin-bottom: 20px;" @click="page()">查询</el-button>
    </el-form>
    <!--  数据-->
    <el-card>
      <el-table :data="studentProgressData" border style="width: 100%" empty-text="暂无数据"
      v-loading="loading">
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="snumber" label="学号"/>
        <el-table-column prop="registered" label="注册状态">
          <template #default="scope">
            <el-tag v-if="scope.row.registered === 1" type="success">已注册</el-tag>
            <el-tag v-else type="danger">未注册</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="roomed" label="宿舍状态">
          <template #default="scope">
            <el-tag v-if="scope.row.roomed === 1" type="success">已分配</el-tag>
            <el-tag v-else type="danger">未分配</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="geted" label="物品状态">
          <template #default="scope">
            <el-tag v-if="scope.row.geted === 1" type="success">已领取</el-tag>
            <el-tag v-else type="danger">未领取</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="payed" label="缴费状态">
          <template #default="scope">
            <el-tag v-if="scope.row.payed === 1" type="success">已支付</el-tag>
            <el-tag v-else type="danger">未支付</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--分页-->
    <el-pagination background layout="prev,sizes, pager, next"
                   :page-sizes="[3,5]"
                   :total="total"
                   :page-size="pageSize"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"

    />
  </div>
</template>

<style scoped>

</style>
